import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoCheckboxSection extends StatelessWidget {
  const VanDocDemoCheckboxSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Checkbox")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(value: const [
                "a"
              ], children: const [
                VanCheckbox(value: "a", child: "复选框 a"),
                VanCheckbox(value: "b", child: "复选框 b"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "禁用状态", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(
                  value: const ["b"],
                  disabled: true,
                  children: const [
                    VanCheckbox(value: "a", child: "复选框"),
                    VanCheckbox(value: "b", child: "复选框"),
                  ]),
              //
              const VanDocDemoBlockTitle(title: "自定义形状", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(
                  value: const ["a", "b"],
                  shape: VanCheckboxShape.round,
                  children: const [
                    VanCheckbox(value: "a", child: "自定义形状 a"),
                    VanCheckbox(value: "b", child: "自定义形状 b"),
                  ]),
              //
              const VanDocDemoBlockTitle(title: "自定义颜色", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(
                  value: const ["a"],
                  shape: VanCheckboxShape.square,
                  children: const [
                    VanCheckbox(value: "a", child: "自定义颜色", checkedColor: Color(0xffee0a24)),
                  ]),
              //
              const VanDocDemoBlockTitle(title: "自定义大小", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(value: const ["a"], children: const [VanCheckbox(value: "a", child: "自定义大小", iconSize: 24)]),
              //
              const VanDocDemoBlockTitle(title: "自定义图标", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(value: const [
                "a"
              ], children: [
                VanCheckbox(
                  value: "a",
                  child: "自定义图标",
                  icon: (scope) {
                    return VanImage.network(
                        scope.checked
                            ? 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png'
                            : 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
                        width: 20);
                  },
                )
              ]),
              //
              const VanDocDemoBlockTitle(title: "左侧文本", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(value: const [], children: const [
                VanCheckbox(value: "a", child: "左侧文本", labelPosition: VanCheckboxPosition.left),
              ]),
              //
              const VanDocDemoBlockTitle(title: "禁用文本点击", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(value: const [
                "a"
              ], children: const [
                VanCheckbox(value: "a", child: "复选框", labelDisabled: true),
              ]),
              //
              const VanDocDemoBlockTitle(title: "复选框组", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(value: const [
                "a",
                "b"
              ], children: const [
                VanCheckbox(value: "a", child: "复选框 a"),
                VanCheckbox(value: "b", child: "复选框 b"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "水平方向", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(
                value: const [],
                direction: VanCheckboxDirection.horizontal,
                children: const [
                  VanCheckbox(value: "a", child: "复选框 a"),
                  VanCheckbox(value: "b", child: "复选框 b"),
                ],
              ),
              //
              const VanDocDemoBlockTitle(title: "限制最大可选数", paddingTop: 20, paddingLeft: 0),
              VanCheckboxGroup(
                value: const [],
                max: 2,
                children: const [
                  VanCheckbox(value: "a", child: "复选框 a"),
                  VanCheckbox(value: "b", child: "复选框 b"),
                  VanCheckbox(value: "c", child: "复选框 c"),
                ],
              ),
              const VanDocDemoBlockTitle(title: "全选与反选", paddingTop: 20, paddingLeft: 0),
              Builder(builder: (context) {
                final controller = VanCheckboxGroupController([]);
                return Wrap(spacing: 16, runSpacing: 16, children: [
                  VanCheckboxGroup(
                    controller: controller,
                    children: const [
                      VanCheckbox(value: "a", child: "复选框 a"),
                      VanCheckbox(value: "b", child: "复选框 b"),
                      VanCheckbox(value: "c", child: "复选框 c"),
                    ],
                  ),
                  VanButton(text: "全选", type: VanButtonType.primary, onClick: () => controller.toggleAll(checked: true)),
                  VanButton(text: "反选", type: VanButtonType.primary, onClick: () => controller.toggleAll()),
                ]);
              }),
              //
              const VanDocDemoBlockTitle(title: "搭配单元格组件使用", paddingTop: 20, paddingLeft: 0),
              Builder(builder: (context) {
                final controller = VanCheckboxGroupController(["a"]);
                return VanCheckboxGroup(
                  controller: controller,
                  child: VanCellGroup(
                    inset: true,
                    style: const VanCellGroupStyle(padding: EdgeInsets.symmetric(horizontal: 0)),
                    children: [
                      VanCell(
                        title: "复选框 a",
                        clickable: true,
                        onClick: () => controller.toggleValue = "a",
                        value: const VanCheckbox(value: "a"),
                      ),
                      VanCell(
                        title: "复选框 b",
                        clickable: true,
                        onClick: () => controller.toggleValue = "b",
                        value: const VanCheckbox(value: "b"),
                      ),
                    ],
                  ),
                );
              }),
              //
              const VanDocDemoBlockTitle(title: "不确定状态", paddingTop: 20, paddingLeft: 0),
              Builder(builder: (context) {
                final checkAll = VanCheckboxController(false, indeterminate: false);

                final controller = VanCheckboxGroupController([]);
                controller.addListener(() {
                  checkAll.indeterminate = controller.checkedLength >= 1;
                  checkAll.checked = controller.checkedLength == 4;
                });
                return Wrap(spacing: 16, runSpacing: 16, children: [
                  VanCheckboxGroup(
                    controller: controller,
                    children: [
                      VanCheckbox(
                        bindGroup: false,
                        controller: checkAll,
                        child: "全选",
                        onClick: () => controller.toggleAll(checked: checkAll.value),
                      ),
                      const Padding(
                        padding: EdgeInsets.symmetric(vertical: 20),
                        child: Divider(height: 0.1, color: Color(0xffcccccc)),
                      ),
                      const VanCheckbox(value: "a", child: "复选框 a"),
                      const VanCheckbox(value: "b", child: "复选框 b"),
                      const VanCheckbox(value: "c", child: "复选框 c"),
                      const VanCheckbox(value: "d", child: "复选框 d"),
                    ],
                  ),
                ]);
              }),
            ],
          ),
        ),
      ),
    );
  }
}
